<template>
	<view class="container">
		<view class="data-list">
			<z-paging ref="paging" v-model="deviceList" @query="getListFun">
				<view class="search" slot="top">
					<u-search placeholder="请输入设备编号" v-model="queryParams.code" searchIcon='scan' @clickIcon="scanFun"
						@search="getListFun" @custom='getListFun' @clear="getListFun"></u-search>
				</view>
				<view class="item" v-for="(item,index) in deviceList">
					<view class="item-title">设备名称：{{item.name}}</view>
					<!-- <uni-collapse ref="collapse" style="width: 80%;">
						<uni-collapse-item title="详细信息"> -->
					<view class="item-body">
						<view>设备编号：{{item.code}}</view>
						<view>规格：{{item.spec}}</view>
						<view>序列号：{{item.sn}}</view>
						<view>MAC：{{item.mac}}</view>
						<view>设备分类：{{item.categoryName}}</view>
						<view>使用人员：{{item.userName}}</view>
						<view>使用部门：{{item.deptName}}</view>
						<view>工厂：{{item.factoryName}}</view>
						<view>工作中心：{{item.centerName}}</view>
						<view>管理人员：{{item.adminName}}</view>
					</view>
					<!-- 	</uni-collapse-item>
					</uni-collapse> -->
					<view style="float: right;">
						<button @click="navigateTo(item)" class="mini-btn" type="primary" size="mini">进入</button>
					</view>
					<u-line margin="30rpx 0rpx 0rpx 0rpx" />
				</view>
			</z-paging>
		</view>
	</view>
</template>

<script>
	import {
		onLoad
	} from 'uview-ui/libs/mixin/mixin';
	import {
		getInspectionPlanDeviceAppPage
	} from '@/api/deviceInspection/deviceInspection.js';
	export default {
		data() {
			return {
				/* 跳转来源 2:设备保养*/
				res : null,
				/* 列表数据 */
				deviceList: [],
				/* 查询参数 */
				queryParams: {
					pageNo: 1,
					pageSize: 10,
					code: undefined,
					planId: undefined
				},
			};
		},
		onLoad(option) {
			this.queryParams.planId = option.item.id
			this.res = option.res
		},
		methods: {
			/* 跳转页面 */
			navigateTo(item) {
				if(this.res === '2'){
					uni.navigateTo({
						url: 'pages/work/maintenanceDeviceSpot/index?item=' + encodeURIComponent(JSON.stringify(item)) +
							'&planId=' + this.queryParams.planId
					})
				} else {
					uni.navigateTo({
						url: 'pages/work/inspectionDeviceSpot/index?item=' + encodeURIComponent(JSON.stringify(item)) +
							'&planId=' + this.queryParams.planId
					})
				}
			},
			/* 查询设备台账列表 */
			getListFun() {
				getInspectionPlanDeviceAppPage(this.queryParams).then(response => {
					this.$refs.paging.complete(response.data.list);
				}).catch(response => {
					this.$refs.paging.complete(false);
				})
			},
			/* 扫码 */
			scanFun() {
				uni.scanCode({
					success: (res) => {
						console.log('条码类型：' + res.scanType);
						console.log('条码内容：' + res.result);
						this.queryParams.code = res.result;
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.container {
		.data-list {
			.search {
				padding: 20rpx 30rpx 20rpx 30rpx;
				background-color: $uni-bg-color;
			}

			.item {
				background-color: $uni-bg-color;
				padding: 30rpx 30rpx 0rpx 30rpx;

				.item-title {
					font-size: $uni-font-size-base;
					font-weight: bold;
					margin-bottom: 15rpx;
				}

				.item-body {
					font-size: $uni-font-size-sm;
					color: $uni-text-color-grey;
				}

				.item-bottom {
					display: flex;
					justify-content: space-between;
					height: 60rpx;
					line-height: 60rpx;

					.item-user {
						display: flex;
						margin-top: 10rpx;

						.item-avatar {
							width: 60rpx;
							height: 60rpx;
							background-color: $uni-color-primary;
							border-radius: 50%;
							color: $uni-text-color-inverse;
							font-size: 30rpx;
							font-weight: bold;
							line-height: 60rpx;
							text-align: center;
						}

						.item-name {
							font-size: $uni-font-size-base;
							margin-left: 10rpx;
							line-height: 60rpx;
						}
					}

					.item-status {
						height: 60rpx;
						line-height: 60rpx;
					}
				}
			}
		}
	}
</style>